<!DOCTYPE html>
<html>
<head>
    <title>LangChain + Ollama 聊天机器人</title>
    <link rel="stylesheet" href="{% static 'css/chat.css' %}">
    <style>
          .top-right {
              flex: 1;
              position: fixed;
              top: 20px;
              right: 20px;
              background: white;
              padding: 15px;
              border-radius: 10px;
              box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
              z-index: 10;
        }

        .top-right label {
            display: block;
            margin: 5px 0;
        }

        .message {
            margin-bottom: 15px;
        }

        .user .message-content {
            background-color: #dcf8c6;
            margin-left: auto;
            border-top-right-radius: 5px;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }

        .bot .message-content {
            background-color: #e5e5ea;
            margin-right: auto;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }

        .message-content {
            max-width: 70%;
            padding: 10px 15px;
            line-height: 1.4;
            word-wrap: break-word;
            font-size: 16px;
        }

        .image-container img {
            max-width: 100%;
            height: auto;
            margin-top: 10px;
            border-radius: 8px;
        }



        .input-area textarea {
            width: 70%;
            height: 60px;
            padding: 10px;
            font-size: 16px;
            border-radius: 10px;
            border: 1px solid #ccc;
            resize: none;
        }

        .input-area button {
            margin-left: 10px;
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            background-color: #4CAF50;
            color: white;
            border-radius: 10px;
            cursor: pointer;
        }

        .input-area button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
<div class="container">
    <!-- 左边导航栏 -->
    <div class="sidebar">
        <div class="nav-item">
            <img src="{% static 'image/chat-dots.svg' %}" alt="Folder Icon" class="folder-icon" width="32" height="32">
            <a href="{% url 'chat' %}">聊天</a>
        </div>
        <div class="nav-item">
            <img src="{% static 'image/pc-display.svg' %}" alt="Folder Icon" class="folder-icon" width="32" height="32">
            <a href="{% url 'knowbase-list_html'  %}">工作台</a>
        </div>
        <div class="nav-item">
            <img src="{% static 'image/journal-bookmark-fill.svg' %}" alt="Folder Icon" class="folder-icon" width="32"
                 height="32">
            <a href="{% url 'rag' %}">知识库</a>
        </div>
        <div class="nav-item">
            <img src="{% static 'image/person-circle.svg' %}" alt="Folder Icon" class="folder-icon" width="32"
                 height="32">
            <a href="#">账号</a>
        </div>
    </div>

    <!-- 右上角：知识库选择 -->
    <div class="top-right">
        <h3>选择知识库</h3>
        {% for kb in knowledge_bases %}
            <label>
                <input type="checkbox" name="knowledge_bases" value="{{ kb.know_base_id }}">
                {{ kb.know_base_name }}
            </label><br>
        {% endfor %}
    </div>

    <div class="main-content">

        <h2 style="text-align: center;">📚 知识库问答</h2>

        <div class = "chat-container" id="chat-box"></div>

        <form id="input-form">
            <input type="text" id="question" placeholder="输入你的问题..." required/>
            <button type="submit" id="send-btn" onclick="sendQuery()">发送</button>
        </form>
    </div>
</div>
<script src="{% static 'js/rag_query2.js' %}"></script>
</body>
</html>